import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
// NProgress.start() 开启进度条---> 在哪里 什么时候开启进度条 ---> 开始跳转页面时开启
// NProgress.done()  关闭进度条---> 在哪里 什么时候关闭进度条 ---> 页面跳转完成关闭
// 导入router

// 导入store
import store from './store'
import router from './router'
import getPageTitle from './utils/get-page-title'
// router.beforeEach((to, from, next) => {
//   console.log('从哪来', from.path)
//   console.log('去哪', to.path)
//   next() // 放行
// })

const whiteList = ['/login', '/404'] // 白名单列表
// 在beforeEach钩子中启动进度条
router.beforeEach(async(to, from, next) => {
  NProgress.start() // 启动进度条
  // 网页动态标题
  // document.title = `人力资源管理系统-${to.meta.title}`
  // 封装使用
  const title = getPageTitle(to.meta.title)
  document.title = title

  const token = store.state.user.token
  //    判断是否有token
  if (token) {
    // 登录了
    // 判断要去的是否是login页面
    if (to.path === '/login') {
      next('/')
      console.log('你已经登录了,直接去首页')
      NProgress.done() // 关闭进度条
      // next('指定了跳转的地址') 就不会经过 router.afterEach函数
      // next() 只有放行的时候才会经过 router.afterEach函数
    } else {
      // 跳转到首页 会先经过导航守卫 在这获取用户信息 储存到vuex中
      // store.dispatch('user/getUserinfo')
      // 在获取用户信息之前,判断vuex中没有储存用户信息,没有储存就发送请求. 储存了就不需要(避免跳转页面反复发送请求)
      if (!store.state.user.userInfo.userId) {
        await store.dispatch('user/getUserinfo')
      }

      next()
      console.log('已经登录,放行')
    }
  } else {
    // 未登录
    // 判断要去的地方是不是白名单
    if (whiteList.includes(to.path)) {
      next()
      console.log('是白名单,放行')
    } else {
      next('/login')
      console.log('不是白名单页面,请先登录')
      NProgress.done() // 关闭进度条
    }
  }
})

// 在afterEach钩子中停止进度条
router.afterEach(() => {
  NProgress.done()
})

